<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单绑定</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <input :value="msg" @input="handleInput"/>
        <hr/>
        <div>
            <p>姓名:{{stu.name}} 年龄:{{stu.age}} 性别:{{stu.gender}} 年级:{{stu.gradeid}} 爱好:{{stu.hobby}}</p>
        </div>
        <div>
            <p>
                姓名:<input v-model="stu.name"/>
            </p>
            <p>
                年龄:<input v-model="stu.age"/>
            </p>
            <p>
                性别:<input type="radio" value="boy" v-model="stu.gender"/>男
                <input type="radio" value="girl" v-model="stu.gender"/>女
            </p>
            <p>
                年级:
                <select v-model="stu.gradeid">
                    <option value="0">---请选择---</option>
                    <option value="1">S1</option>
                    <option value="2">S2</option>
                    <option value="3">Y2</option>
                </select>
            </p>
            <p>
                爱好:
                <input type="checkbox" v-model="stu.hobby" value="swim" name="hobby"/>游泳
                <input type="checkbox" v-model="stu.hobby" value="book" name="hobby"/>看书
                <input type="checkbox" v-model="stu.hobby" value="run" name="hobby"/>跑步
            </p>
            <p>
                <button @click="handleSave">保存</button>
            </p>
        </div>
    </div>
    <script>
        const {createApp} = Vue
        createApp({
            data(){
                return{
                    msg:'hello',
                    stu:{
                        name:'',
                        age:'',
                        gender:'boy',
                        hobby:['book'],
                        gradeid:'0'
                    },
                }
            },
            methods:{
                handleSave(){
                    console.log(this.stu.name,this.stu.age,this.stu.hobby)
                },
                handleInput(e){
                    console.log(e.target.value)
                    this.msg = e.target.value
                }
            }
        }).mount('#app')
    </script>
</body>
</html>